﻿@{
    ViewBag.Title = "图片上传";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<link href="~/Content/css/dropzone.min.css" rel="stylesheet" />
<script src="~/Content/js/dropzone.min.js"></script>
<script src="~/Content/js/dialog/dialog.js"></script>
<link href="~/Content/js/dialog/dialog.css" rel="stylesheet" />
@*<link href="~/Content/js/bootstrap/bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/js/jquery/jquery.min.js"></script>*@


<form action="/"
      class="dropzone"
      enctype="multipart/form-data"
      id="my-dropzone"
      method="post">
        @Html.Hidden("hidAlbumId")
</form>
<div >

    <button type="button" class="btn btn-success" id="submit-all" style="margin-left: 360px;margin-top:10px;">上传</button>
</div>
<script>
    var index = parent.layer.getFrameIndex(window.name);
    var urls;
    function getUrls()
    {
        return urls;
    }
        //Dropzone的初始化，myDropzone为form的id
        Dropzone.options.myDropzone = {

            //指定上传图片的路径
              url: "/PicUpload/BatchUpload?Source=1",

            //添加上传取消和删除预览图片的链接，默认不添加
            addRemoveLinks: true,

            //关闭自动上传功能，默认会true会自动上传
            //也就是添加一张图片向服务器发送一次请求
            autoProcessQueue: false,

            //允许上传多个照片
            uploadMultiple: true,

            //每次上传的最多文件数，经测试默认为2，坑啊
            //记得修改web.config 限制上传文件大小的节
            parallelUploads: 100,

            init: function () {
                var submitButton = document.querySelector("#submit-all")
                myDropzone = this; // closure

                //为上传按钮添加点击事件
                submitButton.addEventListener("click", function () {
                    //手动上传所有图片
                    myDropzone.processQueue();
                });

                //当添加图片后的事件，上传按钮恢复可用
                this.on("addedfile", function () {
                    $("#submit-all").removeAttr("disabled");
                });

                //当上传完成后的事件，接受的数据为JSON格式
                this.on("complete", function (data) {
                    if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                        var res = eval('(' + data.xhr.responseText + ')');
                        var msg;
                        if (res.Result) {
                            msg = "恭喜，已成功上传" + res.Count + "张照片！";
                        }
                        else {
                            msg = "上传失败，失败的原因是：" + res.Message;
                        }
                        $("#message").text(msg);
                        //$("#dialog").dialog("open");
                        urls = res.ResultUrl;
                    }
                });

                //删除图片的事件，当上传的图片为空时，使上传按钮不可用状态
                this.on("removedfile", function () {
                    if (this.getAcceptedFiles().length === 0) {
                        $("#submit-all").attr("disabled", true);
                    }
                });
            }
        };

</script>
